Data Fetching

Data fetching is a critical component for most web applications. When we really think about it, most web applications exist to let users interact with data in a database:

• Search engines are huge databases that let us filter their billions of entries to find the most suitable results.
• Chat applications like Slack let us send and receive messages stored in a database.
• Social networks provide feeds pulled from a database, and let us interact with them by updating data in a database.

In the lessons that follow, we'll see how to send network requests in a React context.

So, there is a huge universe of tools out there to manage network requests for us.

In this course, we're going to use Fetch to make requests. Fetch is a part of the web platform, built right into the browser. If you're not familiar, you can learn about the basics of working with Fetch in the “Fetch Basics” primer lesson 👀.

It's becoming increasingly popular in the React community to use third-party tools like react-query or SWR to help with network requests. In the lessons that follow, we'll see how SWR can augment our Fetch requests.

These lessons will focus on how to use Fetch in a React context. There is a fair amount of “assumed knowledge” here, including:

• Synchronous vs Asynchronous code
• Promises
• Async / Await 👀
• HTTP Methods 👀
• Fetch basics 👀

If you're struggling with any of these pre-requisite concepts, please let me know by hitting the "Submit feedback" button at the bottom of this page! I can definitely add supplemental lessons / exercises for this stuff. 😄

I've created a sample back-end API we can use for learning about network requests.

We'll see exactly how to use it in the lessons ahead, but I wanted to share a little cheatsheet about this sample API:

• All requests are artificially slowed by 1-2 seconds, to give us time to check loading states.
• We can simulate errors by passing a query parameter, simulatedError=true.
• For endpoints that return data, that data will often be randomized / faked.